<template>
  <!-- title是对话框的标题 visible是对话框绑定的布尔值  -->
  <el-dialog
    :title="title"
    :visible="dialogVisible"
    width="50%"
    @close="closeDialog"
  >
    <!-- 表单 -->
    <el-form
      ref="formRef"
      v-loading="loading"
      abel-width="150px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="form.name"
          style="width:80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          v-model="form.code"
          style="width:80%"
          placeholder="1-50个字符"
          :disabled="isdisabled"
        />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="form.manager"
          style="width:80%"
          placeholder="请选择"
        >
          <!-- el-option label属性是展示的文本 value属性是同步给select的v-model关联的值的 -->
          <!-- 此处这value绑定的是username字段，是接口设计的问题，真正开发中传递id才是对的 -->
          <el-option
            v-for="item in SimpleList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="form.introduce"
          style="width:80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleClick">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { reqGetEmployeeSimple } from '@/api/user'
import {
  reqAddDepartments,
  reqGetDepartDetail,
  reqUpdateDepartments
} from '@/api/departments'
export default {
  name: 'AddDepts',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      required: true
    },
    deptsList: {
      type: Array,
      required: true
    }
  },
  data() {
    // 校验同级别部门名称不重复的自定义校验规则
    const checkNameResquest = (rules, value, cb) => {
      if (value === this.nodeData.name) {
        if (this.form.id) {
          cb()
        } else {
          cb(new Error('子部门不能与父部门名称一样'))
        }
      }
      console.log(this.nodeData)
      if (this.form.id && value === this.nodeData.name) {
        return cb()
      }
      // 如果是处于编辑状态,不校验部门名称
      let arr = []
      if (this.form.id) {
        arr = this.deptsList.filter(item => item.pid === this.nodeData.pid)
      } else {
        arr = this.nodeData.children
      }
      // 拿到当前部门的子部门列表的名称和value比较

      console.log(arr)
      const boo = arr.some(item => item.name === value)
      boo ? cb(new Error(`已存在${value}部门`)) : cb()
    }
    // 部门编码的自定义校验规则 不能与任何一个部门编码重复
    const checkCodeResquest = (rules, value, cb) => {
      // 如果是编辑状态 不要进行部门编码的校验
      if (this.form.id && value === this.nodeData.code) {
        return cb()
      }
      const boo = this.deptsList.some(item => item.code === value)
      boo ? cb(new Error(`已存在${value}部门编号`)) : cb()
    }
    return {
      // 新增对话框关联的数据 表单
      form: {
        name: '', // 部门名称
        code: '', // 部门编号
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      // 公司负责人
      SimpleList: [],
      loading: false,
      title: '新增',
      // 表单的校验规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入部门名称',
            trigger: ['change', 'blur']
          },
          {
            min: 2,
            max: 10,
            message: '部门名称必须在2~10个字符',
            trigger: ['change', 'blur']
          },
          {
            validator: checkNameResquest,
            trigger: ['change', 'blur']
          }
        ],
        code: [
          {
            required: true,
            message: '请输入部门编码',
            trigger: ['change', 'blur']
          },
          {
            min: 2,
            max: 10,
            message: '部门编码必须在2~10个字符',
            trigger: ['change', 'blur']
          },
          {
            validator: checkCodeResquest,
            trigger: ['change', 'blur']
          }
        ],
        manager: [
          {
            required: true,
            message: '请选择部门介绍',
            trigger: ['change']
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入部门编码',
            trigger: ['change', 'blur']
          },
          {
            min: 1,
            max: 300,
            message: '部门介绍必须在1~300个字符',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  computed: {
    isdisabled() {
      // if (this.form.id) {
      //   return true
      // } else {
      //   return false
      // }
      return !!this.form.id
    }
    // title() {
    //   return this.form.id ? '编辑部门' : '新增部门'
    // }
  },
  created() {
    this.getSimpleList()
  },
  methods: {
    closeDialog() {
      // resetFields方法对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.formRef.resetFields()
      // 通知父组件将dialogVisible改为false
      // 编辑后再新增 点击确定还是会走编辑的业务， 将form重新初始化成一个原始的状态
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }

      this.$emit('update:dialogVisible', false)
    },
    // 获取部门负责人列表
    async getSimpleList() {
      const { data } = await reqGetEmployeeSimple()
      this.SimpleList = data
    },
    // 点击确认的方法
    handleClick() {
      // 预校验
      this.$refs.formRef.validate(async boo => {
        if (boo) {
          // 只处于编辑状态 form中有id这个字段
          if (this.form.id) {
            // 编辑提交业务
            const { message } = await reqUpdateDepartments(this.form)
            this.$message.success(message)
            this.closeDialog()
            this.$emit('reload')
          } else {
            // 新增的业务
            const { message } = await reqAddDepartments({
              ...this.form,
              pid: this.nodeData.id
            })
            // 提示用户
            this.$message.success(message)
            //  关闭弹出层
            this.closeDialog()
            // 渲染页面
            this.$emit('reload')
          }
        }
      })
    },
    async EditshowDialog(nodeData) {
      this.loading = true
      // this.form = nodeData // 这样直接赋值欠妥  有可能信息会有滞后
      // 这个方法应该 获取部门的信息 将获取回来的数据交给form对象
      // 发送请求 获取部门信息
      const { data } = await reqGetDepartDetail(nodeData.id)
      // 将查询回来的信息 同步给form
      this.form = data
      this.loading = false
    }
  }
}
</script>

<style></style>
